<template>
  <div>
    <a-date-picker
      v-model:value="datePickerValue"
      value-format="YYYY-MM-DD"
      placeholder="请选择日期"
      :disabled="longChecked"
    />
    <span class="inline-block ml-4">
      <a-checkbox v-model:checked="longChecked">长期有效</a-checkbox>
    </span>
  </div>
</template>
<script lang="ts" setup>
import { defineComponent, ref, watch, nextTick } from "vue";
// import { uploadFile, UploadFileResult } from "/@/api/common";
import { LongTerm } from "/@/base/data";

const props = defineProps<{
  value: string;
}>();

const emits = defineEmits(["change"]);

const datePickerValue = ref("");
watch(datePickerValue, (val) => {
  if (!longChecked.value) {
    emits("change", val);
  }
});

const longChecked = ref(false);
watch(
  () => props.value,
  (val) => {
    longChecked.value = val === LongTerm;
    if (!longChecked.value) {
      datePickerValue.value = val;
    }
  },
  {
    immediate: true,
  }
);
watch(longChecked, (v) => {
  emits("change", v ? LongTerm : datePickerValue.value);
});
</script>
<style lang="less" scoped></style>
